<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/goods'}">项目管理</el-breadcrumb-item>
      <el-breadcrumb-item>问题记录</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card class="box-card">
      <el-row :gutter="20">
        <el-col :span="8">
          <el-input placeholder="请输入名称" v-model="queryInfo.query" clearable @clear="getGoodsList">
            <el-button slot="append" icon="el-icon-search" @click="getGoodsList"></el-button>
          </el-input>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" @click="goAddpage" size="medium">添加记录</el-button>
        </el-col>
      </el-row>

      <el-table :data="goodsList" border stripe>
        <el-table-column label="序号" type="index"></el-table-column>
        <el-table-column label="所属项目" prop="goods_cat_name"></el-table-column>
        <el-table-column label="问题描述" prop="goods_name" width="220"></el-table-column>
        <el-table-column prop="pics" label="点击图片预览" width="100">
          
          <template slot-scope="scope">
            <!-- 实现图片点击放大效果 -->
            <!-- <el-popover placement="top-start" trigger="hover">
              <img :src="scope.row.url" style="width: 600px;" />
              <img :src="scope.row.url" slot="reference" style="width: 50px; height: 50px" />
            </el-popover> -->
            <!-- <button @click="handlePreview(scope.row)">预览</button> -->
            <img :src="scope.row.url" slot="reference" v-if="scope.row.pics.length !== 0"  @click="handlePreview(scope.row)" style="width: 50px; height: 50px" />
            <el-dialog title="图片预览" :visible.sync="previewVisible" width="90%" :close-on-click-modal="true">
              <img :src="previewPath" class="preview-img" />
            </el-dialog>
          </template>          
        </el-table-column>        
        <el-table-column label="提出人" prop="goods_sn" width="60"></el-table-column>
        <el-table-column label="影响程度" prop="goods_impact" width="70">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.goods_impact == '高'" type="warning">高</el-tag>
            <el-tag v-if="scope.row.goods_impact == '中'" type="success">中</el-tag>
            <el-tag v-if="scope.row.goods_impact == '低'" type="info">低</el-tag>  
          </template>          
        </el-table-column>
        <el-table-column label="处理" prop="deal" width="260"></el-table-column>
        <el-table-column label="提出时间" prop="solve_date" width="100"></el-table-column>
        <el-table-column label="负责人" prop="responsible_person" width="60"></el-table-column>
        <el-table-column label="开放/关闭" width="80">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.goods_state" @change="recordStateChange(scope.row)"> </el-switch>
          </template>
        </el-table-column>
        <!-- <el-table-column label="创建时间" prop="add_time" width="150px"></el-table-column> -->
        <el-table-column label="操作" width="130px">
          <template slot-scope="scope">
            <el-button size="mini" type="primary" icon="el-icon-edit" @click="goEditpage(scope.row.goods_id)"></el-button>
            <el-button size="mini" type="danger" icon="el-icon-delete" @click="removeById(scope.row.goods_id)"></el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.pagenum"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="queryInfo.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
import { basePath,uploadPath } from '../../../.env.development'

export default {
  data() {
    return {
      basePath,
      uploadPath,
      previewVisible: false,
      previewPath: '',
      solve_date: '',
      queryInfo: {
        query: '',
        pagenum: 1,
        pagesize: 20,
      },
      goodsList: [],
      total: 0,
    }
  },
  created() {
    this.getGoodsList()
  },
  methods: {
    // 获取记录列表
    async getGoodsList() {
      const { data: res } = await this.$http.get('goods', {
        params: this.queryInfo,
      })
      // if (res.meta.status !== 200) {
      //   return this.$message.error('获取记录列表失败')
      // }
      const xx = JSON.parse(res.data)
      console.log('问题记录 xx', xx)
      xx.forEach(item =>{
        console.log('问题记录 item', item)
        if(item.pics.length !== 0){
          this.$set(item,'url',basePath + item.pics[0].pic)
        }
      })
      this.goodsList = xx     
      // for (let item of this.goodsList) {
      //   item.solve_date = this.$utils.formatToTime(item.solve_date)
      // }
      // for (let item of JSON.parse(res.data)) {
      //   item.add_time = this.$$utils.formatToTime(item.add_time)
      //    console.log('记录列表 item', item.add_time)
      // }

     
      // var x = this.goodsList[0].add_time
      console.log('记录列表 goodsList', this.goodsList)
      // this.total = res.total
    },
    async recordStateChange(record) {
      console.log('record.goods_state', record.goods_state)
      const { data: res } = await this.$http.put(`goods/${record.goods_id}/`, record)
      console.log('goods_state res', res)
      // if (res.meta.status !== 200) {
      //   userinfo.mg_state = !userinfo.mg_state
      //   return this.$message.error('更新用户状态失败!')
      // }
      if (typeof(res) === 'string') {
        return this.$message.warning(res)
      }
      console.log('record goods_state', record.goods_state)
      if(record.goods_state){
        this.$message.success('问题开放成功')
      }else{
        this.$message.success('问题关闭成功')
      }
      
    },
    handlePreview(file) {
      console.log('eee', file)
      this.previewVisible = true
      this.previewPath = file.url
    },    
    removeById(id) {
      this.$confirm('确定要删除该记录吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(async () => {
          const { data: res } = await this.$http.delete(`goods/${id}`)
          console.log('删除记录列表 res', res)
          // if (res.meta.status !== 200) {
          //   return this.$message.error('删除失败')
          // }
          if (res === '没有权限') {
            return this.$message.warning(res)
          }
          this.getGoodsList()
          this.$message.success('删除成功')
        })
        .catch(() => {
          this.$message.info('已取消删除！')
        })
    },
    handleSizeChange(pagesize) {
      this.queryInfo.pagesize = pagesize
      this.getGoodsList()
    },
    handleCurrentChange(pagnum) {
      this.queryInfo.pagenum = pagnum
      this.getGoodsList()
    },
    goAddpage(){
      this.$router.push('/goods/add')
    },
    goEditpage(id){
      this.$router.push('/goods/edit?id='+id)
    }    
  },
}
</script>
<style lang="less" scoped>
.preview-img {
  width: 100%;
}
</style>